<template >
    <div >
        <h1>{{msg}}</h1>
        <h1>学生姓名:{{name}}</h1>
        <h1 >学生性别:{{sex}}</h1>
        <h1 >学生年龄:{{myAge+1}}</h1>
        <button @click="updateAge">点击修改age</button>
    </div>
</template>



<script>


// ## 配置项props
// 功能:让组件接收外部传过来的数据
// (1).传递数据:
// <Demo name="xxx">
// (2).接收数据:
// 第一种方式(只接收):
// props:[ 'name']
// 第二种方式(限制类型) :
// props:(
// name:String
// 第三种方式(限制类型、限制必要性、指定默认值) :props:(
// name :
// type:String，//类型
// required;true，//必要性default:老王’//默认值
// 备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，
// 就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的塑据
export default {
    name:'StudentName',
    data() {
        return {
            msg:"我是一个程序员",
            // name:'JJ',
            // sex: '男',
            // age:18
            myAge:this.age
        }
    },

    //props:['name','sex','age'] 
    //简单接收

    // props:{   //接收的时候对类型进行限制
    //     name:String,
    //     age:Number,
    //     sex:String
    // }

    // 类型+默认值+必要性
    props:{
        name:{
            type:String,
            required:true
        },
        sex:{
            type:String,
            default:"男"
        },
        age:{
            type:Number,
            default:100
        }
    },
    methods: {
        updateAge(){
            // this.age=99  避免修改传入的属性
            this.myAge++;
        }
    },
   }
</script>
